<template>
	<!-- 新建地址 或 修改地址弹窗 -->
	<page-container :show="receive_box.isShow" position="bottom" enter="onEnter" @clickoverlay="receive_box.isShow = false">
		<view class="space-view">
			<view class="address-title">
				<text>{{data.option}}收货地址</text>
				<image src="/static/images/close.svg" mode="aspectFit" @click="receive_box.isShow = false"></image>
			</view>
			<view class="address-input">
				<text>收货人</text>
				<input type="text" v-model="form.name">
			</view>
			<view class="address-input">
				<text>手机号码</text>
				<input type="number" v-model="form.telephone">
			</view>
			<view class="address-input">
				<text>选择地址</text>
				<!--  mode="region" 地址选择器 -->
				<picker class="flex-left" mode="region" @change="changeRegion">
					<view>
						<text>{{form.region}}</text>
						<image src="/static/images/right-arrow.svg" mode="aspectFit"></image>
					</view>
				</picker>
			</view>
			<view class="address-input">
				<text>详细地址</text>
				<input type="text" v-model="form.address">
			</view>
			<view class="bottom-btn" @click="submit(data.mod_id)">
				{{data.mod_id == '' ? '保存' : '修改'}}
			</view>
		</view>
	</page-container>
</template>

<script setup>
	import { receive_box } from "@/public/package-js/passValue.js"
	// import { show, modify, deci } from '@/Acc-config/answer.js'
	import { onMounted, reactive, toRefs, defineEmits, watch } from 'vue'
	import { FeedBack } from "@/public/package-js/feedBack.js"

	function onEnter() {}

	const data = reactive({
		form: { // 输入框的值
			name: '', // 收货人姓名
			telephone: '', // 电话号码
			region: '', // 省市区
			address: '', // 具体详细地址
			isChecked: false // 是否选中默认收货地址
		},
		mod_id: '', // 修改的地址的 id
		option: '', // 新建地址还是修改地址
	})
	const { form } = toRefs(data)


	// 1、判断用户是新建地址还是修改地址
	watch(() => receive_box.option, (newVal, oldVal) => {
		if (newVal == 'mod') {
			data.option = '修改'
		} else { // 新建地址
			data.option = '新建'
			clear() // 新建地址要清空弹框
		}
	})

	// 2、监听用户修改地址
	watch(() => receive_box.modifyData, (newVal, oldVal) => {
		// console.log("ddd",newVal);
		data.form.name = newVal.name
		data.form.telephone = newVal.telephone
		data.form.region = newVal.region
		data.form.address = newVal.address
		data.form.isChecked = newVal.isChecked
		data.mod_id = newVal._id
	})


	// 3、获取选择器选中的的值拼接省市区数据
	function changeRegion(event) {
		console.log("event", event);
		let str = ''
		event.detail.value.forEach(item => str += item)
		data.form.region = str
	}

	// 4、校验各种输入框不能为空
	function submit(_id) {
		let phoneReg = /^[1][3-9][0-9]{9}$/
		switch (true) {
			case data.form.name == '':
				new FeedBack("请填写姓名", "none").toast()
				break;
			case data.form.telephone == '':
				new FeedBack("请填写手机号码", "none").toast()
				break;
			case !phoneReg.test(data.form.telephone):
				new FeedBack("手机号码格式不正确", "none").toast()
				break;
			case data.form.region == '':
				new FeedBack("请选择地址", "none").toast()
				break;
			case data.form.address == '':
				new FeedBack("请填写详细地址", "none").toast()
				break;
			default:
				// 符合要求就提交到数据路
				commit(_id)
		}
	}

	// 5、提交到数据库
	let emits = defineEmits(['update'])
	const db = wx.cloud.database()
	async function commit(_id) {
		try {
			if (_id == '') { //提交新地址
				await db.collection('receiver_address').add({
					data: data.form
				})
			} else { //修改地址
				await db.collection('receiver_address').doc(_id).update({ data: data.form })
			}
			// 关闭弹窗
			receive_box.isShow = false
			// 清空弹窗填写数据
			clear()
			// 触发父组件的函数，更新所有的收货地址
			emits('update')

		} catch (e) {
			new FeedBack("提交失败", "error").toast()
		}
	}

	// 6、清空输入框里的值
	function clear() {
		data.form.name = ''
		data.form.telephone = ''
		data.form.region = ''
		data.form.address = ''
		data.form.isChecked = false
		data.mod_id = ''
	}
</script>

<style scoped>
	.address-title {
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
	}

	.address-title text {
		flex: 1;
		text-align: center;
		font-weight: bold;
	}

	.address-title image {
		width: 30rpx;
		height: 60rpx;
	}

	/* 输入部分 */
	.address-input {
		display: flex;
		align-items: center;
		margin: 40rpx 0;
		padding-bottom: 40rpx;
		color: #b4b4b4;
		border-bottom: 1rpx solid #e2e2e2;
	}

	.address-input image {
		width: 40rpx;
		height: 40rpx;
		display: block;
	}

	.address-input input {
		flex: 1;
		padding: 0 20rpx;
		color: #000000;
	}

	.flex-left {
		flex: 1;
	}

	.flex-left view {
		display: flex;
		justify-content: space-between;
	}

	.flex-left text {
		padding: 0 20rpx;
		color: #000000;
	}

	/* 底部操作按钮样式 */
	.bottom-btn {
		background-color: #ea445a;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		color: #FFFFFF;
		font-size: 33rpx;
		border-radius: 10rpx;
		left: 20rpx;
		right: 20rpx;
		bottom: 68rpx;
	}
</style>
